<template>
    <div class="home">
        <header class="home-header">
            <PageHeader title="天域人力管理系统" hidden-breadcrumb />
        </header>
        <main class="project_list">
            <div class="project_list_item" v-for="(item, index) in projectList" :key="index">
                <div class="dis-flex list_item_header">
                    <div class="item_header_name">{{item.name}}</div>
                    <div class="item_header_current">当前阶段：{{item.currentStage}}</div>
                </div>
                <div class="dis-flex list_item_main">
                    <div class="dis-flex apply_left">
                        <div class="apply_post">招聘岗位：{{item.postNum}}个</div>
                        <div class="apply_num">共拟聘人数：{{item.recruit}}人</div>
                    </div>
                    <div class="apply_right">
                        <a @click="goInfo">了解详情 >></a>
                    </div>
                </div>
                <div class="list_item_apply_time">
                    {{item.apple_time}}
                </div>
            </div>
        </main>
        <footer>
            <i-copyright />
        </footer>
    </div>
</template>

<script>
    import iCopyright from '@/components/copyright';
    export default {
        components: {iCopyright},
        data() {
            return {
                projectList: [
                    {
                        name: "项目名称1",
                        postNum: "50",
                        recruit: "300",
                        currentStage: "预告阶段",
                        apple_time: "2020年5月9日  00:00:00 - 2020年5月15日   17:00:00"
                    },
                    {
                        name: "项目名称2",
                        postNum: "50",
                        recruit: "300",
                        currentStage: "预告阶段",
                        apple_time: "2020年5月9日  00:00:00 - 2020年5月15日   17:00:00"
                    },
                    {
                        name: "项目名称3",
                        postNum: "50",
                        recruit: "300",
                        currentStage: "预告阶段",
                        apple_time: "2020年5月9日  00:00:00 - 2020年5月15日   17:00:00"
                    },
                    {
                        name: "项目名称4",
                        postNum: "50",
                        recruit: "300",
                        currentStage: "预告阶段",
                        apple_time: "2020年5月9日  00:00:00 - 2020年5月15日   17:00:00"
                    },
                    {
                        name: "项目名称5",
                        postNum: "50",
                        recruit: "300",
                        currentStage: "预告阶段",
                        apple_time: "2020年5月9日  00:00:00 - 2020年5月15日   17:00:00"
                    }
                ]
            }
        },
        methods: {
            goInfo() {
                this.$router.push({name: 'projectInfo'})
            }
        }
    }
</script>

<style lang="less" scoped>
.home {
    background-color: white;
    .project_list {
        padding: 20px 10%;
        .project_list_item {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            color: #333;
            .list_item_header {
                justify-content: space-between;
                font-size: 20px;
                font-weight: bold;
                color: #000;
            }
            .list_item_main {
                justify-content: space-between;
                line-height: 38px;
                font-size: 16px;
                .apply_left {
                    .apply_post {
                        margin-right: 20px;
                    }
                }
            }
            .list_item_apply_time {
                line-height: 38px;
                font-size: 16px;
            }
        }
    }
}
</style>